/**
 * @author zhangqiang
 * @date   16/12/20
 */

import {
    prefix
} from "../const/prefix";

import Select from "../components/form/Select.js"
import NoData from "../components/NoData.js"
import DatePicker from "../components/form/TimePicker";
import EndPicker from "../components/form/EndPicker";

(function( lf, r) {
    var ajax = lf.utils.ajax,
        log = lf.utils.log,
        RC = r.createClass;

        let $form = $('form'),
            appointmentTime = $form.find('#appointmentTime').val() + ':00',//后台需要加秒来转换为date类型
            doAction = lf.bridgeJs.doAction;

        let Clocka = RC({
            edit: function (e) {
                //log('edit ');
                this.props.editSetting(e,'');
            },
            componentDidMount: function(){
                var radio = r.findDOMNode(this.refs.radio);
                radio.addEventListener('touchend', function (e) {
                    lf.utils.stopBubble(e);

                    var node = $(e.target);
                    if(node.hasClass('mui-switch-handle'))
                        node = node.parent();

                    node.siblings().toggleClass('inactive');

                });
            },
            render: function () {
                var data = this.props.data;

                //<li className="index gray-bg font44">第{data.index}次</li>
                return (
                    <li onTouchEnd={this.edit} className="mui-table-view-cell ">
                        <a data-index={456} className="mui-navigate-right">
                            <p className="time">{11}</p>
                            <p className="interval font48">
                                {11}
                            </p>
                            <div ref="radio" className="mui-switch mui-active">
                                <div className="mui-switch-handle"></div>
                            </div>
                        </a>
                    </li>
                );
            }
        });

        let Panel= RC({
            getInitialState:function(){
                return({
                    business:true
                });
            },
            menList(){
                return [
                    {
                        text: 12345.00||this.state.name || ' ',
                        code: "TASK-CONFIRM",
                        name: "今日收益(元)",
                        type: 'text',
                        color: 'redNum red',
                        ref: 'name',

                    }, {
                        text: 15520.00
                        ||this.state.name || ' ',
                        code: "TASK-CONFIRM",
                        name: "今日订单",
                        type: 'text',
                        color: 'redNum',
                        ref: 'name',
                    },
                ]

            },


            componentDidMount:function(){
             $("#mySwitch").on("toggle",function(event){
                    if(event.detail.isActive){
                        console.log("你启动了开关");
                    }else{
                        console.log("你关闭了开关");
                    }
                })

                let me = this,
                radio = r.findDOMNode(this.refs.radio);
                radio.addEventListener('touchend', function (e) {
                    me.setState({
                        business:!me.state.business,
                    })
                });
                console.log(this.state.business)
                let begun = r.findDOMNode(this.refs.begun);
                $(begun).on('tap', function () {
                    doAction('store-details.html', '店铺资料')
                });
                let jeep  = r.findDOMNode(this.refs.switch);
                $(jeep).on('tap', function () {
                    doAction('store-switch.html', '切换店铺')

                })

            },
            // abour(e){
            //     document.getElementById("mySwitch").addEventListener("toggle",function(e){
            //         if(e.detail.isActive){
            //             console.log("你启动了开关");
            //         }else{
            //             console.log("你关闭了开关");
            //         }
            //     });
            // },
            componentDidUpdate: function () {
             // this.abour()

                console.log(1)
                // mui("#mySwitch").switch().toggle();
            },
            // shouldComponentUpdate(nextProps, nextState) {
            //     return this.props !== nextProps
            //     //return false 则不更新组件
            //     this.props.onChangeType(this.props.identify, this.refs.rename.value);
            // },
            render(){
                let item2DArray = lf.utils.to2DArray(this.menList() || [], 2);
                let menList = item2DArray.map((array, i) => {
                    return (
                        <div key={'array' + i} className="item-row">
                            {
                                array.map(menu => {
                                    return <div key={menu.id} className="item list">
                                        <div>
                                        <span className={menu.color}>
                                            {/*this.getNum(menu.code)*/}
                                            {menu.text}
                                        </span>
                                            <p className={menu.type}>{menu.name}</p>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    );
                });

                //var data = this.props.data;
                //var isDefault = data.isDefault == null || data.isDefault == 0 ? false : true;  后台返回 控制开关样式
                return(
                    <form className="margin-top" ref="form">
                        <div className="notice">
                            <div className="box">
                                {menList}
                                <p className="mui-table-view-cell showing">
                                    <span>累计</span><span>:</span><span>￥1111.00</span>
                                </p>
                                <a className="mui-input-row"   href="javascript:;" ref="setDefault">
                                    <div className="device-name">
                                        <p className="black">营业状态</p>
                                        <p className="business">{
                                            this.state.business?'营业中':'休息中'
                                        }</p>
                                    </div>
                                    <div ref="radio" className="mui-switch mui-switch-mini mui-switch-blue mui-active" >
                                        <div className="mui-switch-handle"></div>
                                    </div>
                                </a>
                                <div className="mui-table-view-cell showing">
                                    <span>营业时间</span>
                                </div>
                            </div>
                            <ul className="mui-table-view mui-table-view-chevron choose-link">
                                <li className="mui-table-view-cell">
                                    <a href="javascript:;" className="time-far">
                                        <span className="text">开始时间</span>
                                        <DatePicker {...{
                                            value: lf.utils.format(), name: "appointmentTime",
                                            addClass: "float-right"
                                        }}/>

                                    </a>
                                </li>
                                <li className="mui-table-view-cell">
                                    <a href="javascript:;" className="time-far">
                                        <span className="text">结束时间</span>
                                        <EndPicker {...{
                                            value: lf.utils.format(), name: "TimeEed",
                                            addClass: "float-right"
                                        }}/>
                                        <noscript></noscript>
                                    </a>
                                </li>
                            </ul>
                            <ul className="mui-table-view mui-table-view-chevron choose-link">
                                <li className="mui-table-view-cell">
                                    <a href="javascript:;" className="mui-navigate-right" ref="begun">
                                        <span className="text">店铺详情</span>
                                        <noscript></noscript>
                                    </a>
                                </li>
                                <li className="mui-table-view-cell">
                                    <a href="javascript:;" className="mui-navigate-right" ref="switch">
                                        <span className="text">切换店铺</span>
                                        <noscript></noscript>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </form>
                )
            }
        })


        let Container= RC({
            dataList(){
                return [
                    {
                        val: 1||this.state.name || ' ',
                        type: 'text',
                        name: 'name',
                        ref: 'name',
                        title: "编辑商品",
                    }, {
                        val: 1||this.state.name || ' ',
                        type: 'text',
                        name: 'name',
                        ref: 'name',
                        title: "商品描述",
                    }, {
                        val: 1||this.state.name || ' ',
                        type: 'text',
                        name: 'name',
                        ref: 'name',
                        title: "库存",
                    }, {
                        val: 1||this.state.maritalStatus||'',

                        name: 'marital',
                        ref: 'marital',
                        title: '单价'
                    }, {
                        val:1||this.state.name || ' ',
                        type: 'number',
                        name: 'name',
                        code: 'SEX',
                        ref: 'name',
                        title: "排序",
                    }, {
                        val: 1||this.state.name || ' ',
                        code: 'MARITAL_STATUS',
                        type: 'number',
                        name: 'name',
                        ref: 'name',
                        title: "标签",
                    },
                ]
            },
            render(){
                let info = this.dataList();

                return(
                    <div className="finger-restaurant">
                        <Panel />
                    </div>
                )
            }
        })

    r.render(
        <Container />,
        document.getElementById('root'),function(){
            $('.ui-dtpicker-header').css({'display':'none'});
        }
    )

})( liefeng, React)
